
import React, {Fragment} from "react";
import {Col, Form, Row,Button} from "antd";
import FormInput from "../form/FormInput";
import FormMulInput from "../form/FormMulInput";
import FormSelect from "../form/FormSelect";
import FormMulSelect from "../form/FormMulSelect";
import FormTimePicker from "../form/FormTimePicker";
import FormDatePicker from "../form/FormDatePicker";
import FormMonthPicker from "../form/FormMonthPicker";
import FormYearPicker from "../form/FormYearPicker";
import FormRadio from "../form/FormRadio";
import FormCheckBox from "../form/FormCheckBox";
import styles from "../index.module.css";
import store from "../../pages/generate/ordinary/Store";
import FormTimeRangePicker from "../form/FormTimeRangePicker";
import FormDateRangePicker from "../form/FormDateRangePicker";
import FormMonthRangePicker from "../form/FormMonthRangePicker";
import FormYearRangePicker from "../form/FormYearRangePicker";
import FormTreeSelect from "../form/FormTreeSelect";

class SearchForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            reset:false
        }
    }

    handleSearch = () => {
        this.props.form.validateFields((err, formData) => {
            if (!err){
                this.setState({loading: true,reset:false});
                store.setSearchMap(formData);
                store.fetchRecords();
                this.setState({loading: false});
            }
        });
    };

    handleReset = () => {
        this.setState({loading: true,reset:true});
        store.resetSearchMap();
        this.props.form.resetFields();
        this.setState({loading: false});
    };

    changeReset = () => {
        this.setState({reset:false})
    };

    render() {
        const {config} = this.props;
        return (
            <Fragment>
                <Form className={styles.searchForm} style={this.props.style}>
                    <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    {config.map((item,index) => {
                        if (item["component"] === "FormInput"){
                            return  <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormMulInput"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormMulInput key={index} form={this.props.form} label={item["label"]} field={item["field"]}  placeholder={item["placeholder"]} rows={item["rows"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormSelect"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} allowClear={item["allowClear"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} /></Col>
                        }else if (item["component"] === "FormMulSelect"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormMulSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} /></Col>
                        }else if (item["component"] === "FormTimePicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormTimePicker key={index} form={this.props.form}  label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormDatePicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormDatePicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormMonthPicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormMonthPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormYearPicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormYearPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} /></Col>
                        }else if (item["component"] === "FormRadio"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormRadio key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]} /></Col>
                        }else if (item["component"] === "FormCheckBox"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormCheckBox key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormTimeRangePicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 9}><FormTimeRangePicker changeReset={this.changeReset} reset={this.state.reset} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormDateRangePicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 9}><FormDateRangePicker changeReset={this.changeReset} reset={this.state.reset} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormMonthRangePicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 9}><FormMonthRangePicker changeReset={this.changeReset} reset={this.state.reset} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></Col>
                        }else if (item["component"] === "FormYearRangePicker"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 9}><FormYearRangePicker changeReset={this.changeReset} reset={this.state.reset} key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/></Col>
                        }else if(item["component"] === "FormTreeSelect"){
                            return <Col key={index} sm={item["ratio"] ? item["ratio"] : 9}><FormTreeSelect changeReset={this.changeReset} reset={this.state.reset} key={index} form={this.props.form} label={item["label"]}  treeData={item["options"]}  initialValue={item["initialValue"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} rules={item["rules"]} showLeafOnly={item["showLeafOnly"]}/></Col>
                        }else {
                            return  <Col key={index} sm={item["ratio"] ? item["ratio"] : 6}><FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/></Col>
                        }
                    })}
                        {
                            config.length > 0 && <Col sm={6} style={{height:"64px"}}>
                                <Button type="primary" icon="sync" loading={this.state.loading} onClick={this.handleReset}>重置</Button>
                                <Button style={{marginLeft:'10px'}} type="primary" icon="search" loading={this.state.loading} onClick={this.handleSearch}>搜索</Button>
                            </Col>
                        }

                    </Row>
                </Form>
            </Fragment>
        );
    }
}

export default Form.create()(SearchForm)
